<div class="pannel-default">
    <nz-tabset [nzTabBarExtraContent]="extraTemplate">
        <nz-tab [nzTitle]="'编辑角色权限'">
            <div nz-row nzType="flex" nzGutter="16">
                <div nz-col nzSpan="8">
                    <nz-card nzTitle="基本信息">
                        <form nz-form [formGroup]="validateForm">
                            <nz-form-item>
                                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">角色名称</nz-form-label>
                                <nz-form-control [nzSm]="14" [nzXs]="24" [(nzValidateStatus)]="validateForm.controls.name">
                                    <input nz-input id="name" formControlName="name" placeholder="请输入角色名称" />
                                    <nz-form-explain *ngIf="validateForm.get('name')?.dirty && validateForm.get('name')?.errors">角色名称不能为空！</nz-form-explain>
                                </nz-form-control>
                            </nz-form-item>
                            <nz-form-item>
                                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="memo" nzRequired>角色描述</nz-form-label>
                                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('memo')">
                                    <input nz-input id="memo" formControlName="memo" placeholder="请输入角色描述" />
                                </nz-form-control>
                            </nz-form-item>
                            <nz-form-item>
                                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="status" nzRequired>状态</nz-form-label>
                                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('status')">
                                    <input nz-input id="status" formControlName="status" placeholder="请选择状态" />
                                </nz-form-control>
                            </nz-form-item>
                        </form>
                    </nz-card>
                </div>
                <div nz-col nzSpan="16">
                    <nz-card nzTitle="权限分配">
                        <nz-table #expandTable [nzData]="menuTree" [nzFrontPagination]="false" [nzHideOnSinglePage]="true" [nzLoading]="tableLoading">
                            <thead>
                                <tr>
                                    <th nzWidth="10%" nzShowCheckbox [(nzChecked)]="isAllDisplayDataChecked" [nzIndeterminate]="isIndeterminate" (nzCheckedChange)="checkAll($event)"></th>
                                    <th nzWidth="65%">菜单名称</th>
                                    <th nzWidth="25%">权限路径</th>
                                </tr>
                            </thead>
                            <tbody>
                                <ng-container *ngFor="let data of expandTable.data">
                                    <tr>
                                        <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="refreshStatus(data)"></td>
                                        <td [nzIndentSize]="0" [nzShowExpand]="!!data.children" [(nzExpand)]="data.expand" (nzExpandChange)="changeExpand($event,data)">
                                            <i nz-icon [nzType]="data.image" nzTheme="outline"></i><span style="font-weight:bold;color:#000;"> {{ data.name }}</span>
                                        </td>
                                        <td>{{ data.path }}</td>
                                    </tr>
                                    <ng-container *ngFor="let item of data.children">
                                        <tr *ngIf="data.expand">
                                            <td nzShowCheckbox [(nzChecked)]="item.checked" (nzCheckedChange)="refreshStatus(item)"></td>
                                            <td [nzIndentSize]="35" [nzShowExpand]="!!item.children" [(nzExpand)]="item.expand">
                                                <i nz-icon [nzType]="item.image" nzTheme="outline"></i><span style="color:#666;"> {{ item.name }}</span>
                                            </td>
                                            <td>{{ item.path }}</td>
                                        </tr>
                                        <ng-container *ngFor="let btn of item.children">
                                            <tr *ngIf="item.expand">
                                                <td nzShowCheckbox [(nzChecked)]="btn.checked" (nzCheckedChange)="refreshStatus(btn)"></td>
                                                <td [nzIndentSize]="70">
                                                    {{ btn.name }}
                                                </td>
                                                <td>{{ btn.path }}</td>
                                            </tr>
                                        </ng-container>
                                    </ng-container>
                                </ng-container>
                            </tbody>
                        </nz-table>
                    </nz-card>
                </div>
            </div>
            <div style="margin:30px; text-align: center;">
                <button nz-button nzType="default" style="margin:0 10px;">取消</button>
                <button nz-button nzType="primary" style="margin:0 10px;" (click)="submit()">确认</button>
            </div>
        </nz-tab>
    </nz-tabset>
    <ng-template #extraTemplate>
        <button nz-button nzType="primary" (click)="addRole()">创建角色</button>
    </ng-template>
</div>
